<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后台管理模板</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="#(base)/static/admin/plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="#(base)/static/admin/css/global.css" media="all">
		<link rel="stylesheet" href="#(base)/static/admin/plugins/font-awesome/css/font-awesome.min.css">
	</head>
	<body>
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header header header-demo">
				<div class="layui-main">
					<div class="admin-login-box">
						<a class="logo" style="left: 0;" href="#">
							<span style="font-size: 22px;">#(siteName)-#(siteCode)</span>
						</a>
						<div class="admin-side-toggle">
							<i class="fa fa-bars" aria-hidden="true"></i>
						</div>
					</div>
					<ul class="layui-nav">
						<li class="layui-nav-item" >
							<a url="/admin/generate/build/#(siteCode)" class="buildSite">静态生成</a>
						</li>
						<li class="layui-nav-item" >
							<a url="/admin/generate/publish/#(siteCode)" class="buildSite">远程发布</a>
						</li>
						<li class="layui-nav-item" >
							<a href="http://www.iduoer.cn/" class="buildSite" target="_black">访问测试</a>
						</li>
						<li class="layui-nav-item" >
							<a href="#" class="admin-header-user">#(siteName)</a>
							<dl class="layui-nav-child">
								#for(key : sites.keySet())
         							<dd>
										<a url="/admin/common/changeSite/#(key)" class="changeSite" ><i class="fa fa-gear" aria-hidden="true"></i>#(sites.get(key))</a>
									</dd>
     							#end
							</dl>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;" class="admin-header-user">
								<img src="#(base)/static/admin/images/0.jpg" style="width: 40px; height: 40px; border-radius: 100%;" />
								<span>beginner</span>
							</a>
							<dl class="layui-nav-child">
								<dd>
									<a href="javascript:;"><i class="fa fa-user-circle" aria-hidden="true"></i> 个人信息</a>
								</dd>
								<dd>
									<a href="javascript:;"><i class="fa fa-gear" aria-hidden="true"></i> 设置</a>
								</dd>
								<dd>
									<a href="login.html"><i class="fa fa-sign-out" aria-hidden="true"></i> 注销</a>
								</dd>
							</dl>
						</li>
					</ul>
				</div>
			</div>
			<div class="layui-side layui-bg-black" id="admin-side">
				<div class="layui-side-scroll" id="admin-navbar-side" lay-filter="side"></div>
			</div>
			<div class="layui-body" style="bottom: 0;border-left: solid 2px #1AA094;" id="admin-body">
				<div class="layui-tab admin-nav-card layui-tab-brief" lay-filter="admin-tab">
					<ul class="layui-tab-title">
						<li class="layui-this">
							<i class="fa fa-dashboard" aria-hidden="true"></i>
							<cite>控制面板</cite>
						</li>
					</ul>
					<div class="layui-tab-content" style="min-height: 150px; padding: 5px 0 0 0;">
						<div class="layui-tab-item layui-show">
							<iframe src="/admin/common/main" id="ifrmid"></iframe>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-footer footer footer-demo">
				<div class="layui-main">
					<p>2016 &copy;
						<a href="http://beginner.zhengjinfan.cn/demo/beginner_admin/">beginner.zhengjinfan.cn</a> LGPL license
					</p>
				</div>
			</div>
			<div class="site-tree-mobile layui-hide">
				<i class="layui-icon">&#xe602;</i>
			</div>
			<div class="site-mobile-shade"></div>
			<script type="text/javascript" src="#(base)/static/admin/plugins/layui/layui.js"></script>
			<script>
				layui.config({
					base: '#(base)/static/admin/js/'
				}).use(['element', 'layer', 'navbar'], function() {
					var element = layui.element(),
						$ = layui.jquery,
						layer = layui.layer,
						navbar = layui.navbar();
					var json = #(resources);	
					//navbar.render();
					$(".changeSite").click(function(){
						var url = $(this).attr("url");
						$.ajax({
    						url:url,
    						type:'POST', //GET
    						async:true,    //或false,是否异步
    						timeout:5000,    //超时时间
    						dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
   							beforeSend:function(xhr){
        						console.log(xhr)
        						console.log('发送前')
    						},
    						success:function(data,textStatus,jqXHR){
    							window.location.reload();//刷新当前页面.
    							console.log(textStatus)
        						console.log(jqXHR)
        						console.log(data)
    						},
    						error:function(xhr,textStatus){
        							console.log('错误')
        							console.log(xhr)
        							console.log(textStatus)
    						},
    						complete:function(){
        							console.log('结束')
    						}
						})
					});
					$(".buildSite").click(function(){
						var url = $(this).attr("url");
						$.ajax({
    						url:url,
    						type:'POST', //GET
    						async:true,    //或false,是否异步
    						timeout:5000,    //超时时间
    						dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
   							beforeSend:function(xhr){
        						console.log(xhr)
        						console.log('发送前')
    						},
    						success:function(data,textStatus,jqXHR){
    							window.location.reload();//刷新当前页面.
    							console.log(textStatus)
        						console.log(jqXHR)
        						console.log(data)
    						},
    						error:function(xhr,textStatus){
        							console.log('错误')
        							console.log(xhr)
        							console.log(textStatus)
    						},
    						complete:function(){
        							console.log('结束')
    						}
						})
					});
					//iframe自适应
					$(window).on('resize', function() {
						var $content = $('.admin-nav-card .layui-tab-content');
						$content.height($(this).height() - 147);
						$content.find('iframe').each(function() {
							$(this).height($content.height());
						});
					}).resize();
					//设置navbar
					navbar.set({
						elem: '#admin-navbar-side',
						data: json
					});
					//渲染navbar
					navbar.render();
					var $body = $('.admin-nav-card');
					var $tabs = $body.children('ul.layui-tab-title');
					var $contents = $body.children('div.layui-tab-content');
					var tabFilter = 'admin-tab';
					//监听点击事件
					navbar.on('click(side)', function(data) {
						var href = data.field.href;
						if(href === undefined || href === '') {
							return;
						}
						var iframe = '<iframe src="' + href + '"></iframe>';
						var html = data.elem.html();
						var count = 0;
						var tabIndex;
						console.log($tabs);
						$tabs.find('li').each(function(i, e) {
							var $cite = $(this).children('cite');
							if($cite.text() === data.elem.find('cite').text()) {
								count++;
								tabIndex = i;
							};
						});
						//tab不存在
						if(count === 0) {
							//添加删除样式
							html += '<i class="layui-icon layui-unselect layui-tab-close">&#x1006;</i>';
							//添加tab
							element.tabAdd(tabFilter, {
								title: html,
								content: iframe
							});
							//iframe 自适应
							var $content = $('.admin-nav-card .layui-tab-content');
							$content.find('iframe').each(function() {
								$(this).height($content.height());
							});
							//绑定关闭事件
							$tabs = $body.children('ul.layui-tab-title');
							var $li = $tabs.find('li');
							$li.eq($li.length - 1).children('i.layui-tab-close').on('click', function() {
								element.tabDelete(tabFilter, $(this).parent('li').index()).init();
							});
							//获取焦点
							element.tabChange(tabFilter, $li.length - 1);

						} else {
							//切换tab
							element.tabChange(tabFilter, tabIndex);
						}
					});

					$('.admin-side-toggle').on('click', function() {
						console.log($('#admin-side').width());
						console.log($('#admin-body').css('left'));
						var sideWidth = $('#admin-side').width();
						if(sideWidth === 200) {
							$('#admin-side').width(0);
							$('#admin-body').css('left', '0');
						} else {
							$('#admin-side').width(200);
							$('#admin-body').css('left', '200px');
						}

					});

					//手机设备的简单适配
					var treeMobile = $('.site-tree-mobile'),
						shadeMobile = $('.site-mobile-shade');
					treeMobile.on('click', function() {
						$('body').addClass('site-mobile');
					});
					shadeMobile.on('click', function() {
						$('body').removeClass('site-mobile');
					});
				});
			</script>
		</div>
	</body>

</html>